<template>
  <div class="card">
    <div class="m-card">
      <div class="show">
        <span class="big">鏡音リン</span>
        <span class="small">镜音铃</span>
      </div>
      <div class="img">
        <img
          src="https://p1.music.126.net/N2-klboTIcLhC4vC1sapsQ==/18696095720536964.jpg?param=640y300"
          alt=""
        />
      </div>
      <div class="remen">
        <ul>
          <li id="active">
            <a href="#">热门作品</a>
          </li>
          <li>
            <a href="#">所有专辑</a>
          </li>
          <li>
            <a href="#">相关MV</a>
          </li>
          <li>
            <a href="#">艺人介绍</a>
          </li>
        </ul>
      </div>
      <div class="play">
        <button class="bf">
          <span class="iconfont icon-bofang"></span>&nbsp;播放</button
        ><button class="icon">+</button>
        <button class="shca">
          <span class="iconfont icon-shoucang"></span>&nbsp;收藏热门
        </button>

        <select class="choose">
          <option value="">热门歌曲</option>
          <option value="">作词作品</option>
          <option value="">作曲作品</option>
        </select>
      </div>

      <div class="table1">
        <table>
          <tr>
            <td class="first">1</td>
            <td class="singer">
              <a href="#"
                ><span class="iconfont icon-bofang"></span>&nbsp;<span
                  >凤凰传奇()</span
                ><a href="">mv</a></a
              >
            </td>
            <td class="first">01:16</td>
            <td>xnksn</td>
          </tr>
          <tr>
            <td class="first">1</td>
            <td class="singer">
              <a href="#"
                ><span class="iconfont icon-bofang"></span>&nbsp;<span
                  >凤凰传奇()</span
                ><a href="">mv</a></a
              >
            </td>
            <td class="first">01:16</td>
            <td>xnksn</td>
          </tr>
          <tr>
            <td class="first">1</td>
            <td class="singer">
              <a href="#"
                ><span class="iconfont icon-bofang"></span>&nbsp;<span
                  >凤凰传奇()</span
                ><a href="">mv</a></a
              >
            </td>
            <td class="first">01:16</td>
            <td>xnksn</td>
          </tr>
          <tr>
            <td class="first">1</td>
            <td class="singer">
              <a href="#"
                ><span class="iconfont icon-bofang"></span>&nbsp;<span
                  >凤凰传奇()</span
                ><a href="">mv</a></a
              >
            </td>
            <td class="first">01:16</td>
            <td>xnksn</td>
          </tr>
          <tr>
            <td class="first">1</td>
            <td class="singer">
              <a href="#"
                ><span class="iconfont icon-bofang"></span>&nbsp;<span
                  >凤凰传奇()</span
                ><a href="">mv</a></a
              >
            </td>
            <td class="first">01:16</td>
            <td>xnksn</td>
          </tr>
          <tr>
            <td class="first">1</td>
            <td class="singer">
              <a href="#"
                ><span class="iconfont icon-bofang"></span>&nbsp;<span
                  >凤凰传奇()</span
                ><a href="">mv</a></a
              >
            </td>
            <td class="first">01:16</td>
            <td>xnksn</td>
          </tr>
          <tr>
            <td class="first">1</td>
            <td class="singer">
              <a href="#"
                ><span class="iconfont icon-bofang"></span>&nbsp;<span
                  >凤凰传奇凤凰传奇凤凰传奇凤()</span
                ><a href="">mv</a></a
              >
            </td>
            <td class="first">01:16</td>
            <td>xnksn</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="m-tag">
      <div class="sameSinger">
        <p>相似歌手</p>
      </div>
      <div class="geshouImg">
        <ul>
          <li>
            <p>
              <img
                src="https://p1.music.126.net/_JxQjbUNu-NuxiCltE2f7w==/18930291695698345.jpg?param=50y50"
                alt=""
              />
            </p>
            <p>wowaka</p>
          </li>
          <li>
            <p>
              <img
                src="https://p1.music.126.net/_JxQjbUNu-NuxiCltE2f7w==/18930291695698345.jpg?param=50y50"
                alt=""
              />
            </p>
            <p>wowaka</p>
          </li>
          <li>
            <p>
              <img
                src="https://p1.music.126.net/_JxQjbUNu-NuxiCltE2f7w==/18930291695698345.jpg?param=50y50"
                alt=""
              />
            </p>
            <p>wowaka</p>
          </li>
          <li>
            <p>
              <img
                src="https://p1.music.126.net/_JxQjbUNu-NuxiCltE2f7w==/18930291695698345.jpg?param=50y50"
                alt=""
              />
            </p>
            <p>wowaka</p>
          </li>
          <li>
            <p>
              <img
                src="https://p1.music.126.net/_JxQjbUNu-NuxiCltE2f7w==/18930291695698345.jpg?param=50y50"
                alt=""
              />
            </p>
            <p>wowaka</p>
          </li>
          <li>
            <p>
              <img
                src="https://p1.music.126.net/_JxQjbUNu-NuxiCltE2f7w==/18930291695698345.jpg?param=50y50"
                alt=""
              />
            </p>
            <p>wowaka</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reqSingerSong } from "@/api/singer/index";
export default {
  name: "singerDetail",
  data() {
    return {
      id: this.$route.params.id,
    };
  },
 async mounted() {
    const result=await reqSingerSong(this.id)
   console.log(this.id);
  },
};
</script>

<style lang="less" scoped>
.card {
  border: 1px solid red;
  position: relative;
  .m-card {
    width: 73%;
    border-right: 1px solid yellow;
    .show {
      margin: 26px 0px 11px 34px;
      .big {
        font-size: 25px;
      }
      .small {
        font-size: 13px;
        color: #999999;
      }
    }
    .img {
      border: 1px solid #d4d4d4;
      width: 640px;
      margin: 0px 34px;
      border-bottom: none;
    }
    .remen {
      ul {
        overflow: hidden;
        margin: 0px 38px 0px 33px;
        background-color: #f7f7f7;
        li {
          float: left;
          font-size: 15px;
          height: 39px;
          width: 158px;
          line-height: 35px;
          text-align: center;
          border: 1px solid gray;
        }
        #active {
          border-top: 2px solid red;
          background-color: white;
          border-bottom: none;
        }
      }
    }
    .play {
      margin: 20px 39px 0px 33px;
      .bf {
        width: 65px;
        height: 34px;
        font-size: 13px;
        background-color: #2475c3;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border: none;
        color: white;
      }
      .icon {
        width: 30px;
        height: 33px;
        font-size: 17px;
        color: white;
        background-color: #2475c3;
        border: 2px solid #286199;
        border-top: none;
        border-bottom: none;
      }
      .shca {
        width: 94px;
        height: 30px;
        font-size: 13px;
        border: 1px solid #cdcdcd;
        margin-left: 22px;
      }
      .choose {
        font-size: 13px;
        margin-left: 311px;
        height: 31px;
        width: 110px;
        text-align: center;
        outline: none;
      }
    }
    .table1 {
      margin: 19px 39px 0px 28px;
      height: auto;
      table {
        tr {
          .first {
            width: 30px;
            text-align: center;
          }
          &:nth-child(2n-1) {
            background-color: #f7f7f7;
          }
          td {
            width: 207px;
            height: 37px;
            text-align: center;
          }
          .time {
            width: 30px;
          }
          .singer {
            width: 371px;
          }
        }
      }
    }
  }
  .m-tag {
    width: 24%;
    position: absolute;
    top: 0px;
    left: 720px;
    .sameSinger {
      border-bottom: 1px solid red;
      font-size: 13px;
      height: 43px;
      line-height: 53px;
      margin-left: 16px;
      margin-bottom: 10px;
    }
    .geshouImg {
      border: 1px solid green;
      margin-left: 15px;
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        li {
          flex: 1;
          width: 33%;
          margin-right: 10px;
        }
      }
      ul:after {
        width: 33%;
        content: "";
      }
    }
  }
}
</style>